<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
        @click="goBack"
        class="chl"
        name="arrow-left"
        color="#000"
        size="20"
      />
      <div class="chtitle">转账</div>
      <div class="djbox"></div>
    </div>
    <div class="ibox1">
      <img src="@/assets/images/tx1.png" alt="" />
    </div>
    <div class="ibox2">
      <div class="ili">
        <div class="ili-1">到账用户ID</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.toUserId"
            placeholder="输入用户id"
          />
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">转账数量</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.amount"
            placeholder="0"
            :border="false"
            @change="handleNum"
            type="number"
          />
          <span class="xxx">RYZ <span @click="chooseAll">全部</span></span>
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">资金密码</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.password"
            placeholder="输入资金密码"
            type="password"
          />
        </div>
      </div>
      <div class="ali">
        <div class="ali1">可用资产</div>
        <div class="ali2">{{ walletInfo.fuel.balance }} RYZ</div>
      </div>
      <!-- <div class="ali">
        <div class="ali1">最小提现金额</div>
        <div class="ali2">
          {{ walletInfo.currency.minimumWithdrawalAmount }} USDT
        </div>
      </div>
      <div class="ali">
        <div class="ali1">手续费</div>
        <div class="ali2">{{ fee }} USDT</div>
      </div> -->
    </div>

    <div class="btn" @click="handleSubmit">提交</div>
  </div>
</template>
  
  <script setup lang='ts'>
import { reactive, onMounted, computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "@/store";
import { ethers } from "ethers";
import { Toast } from "vant";
import http from '@/utils/http'
const store = useStore();
const router = useRouter();
const walletInfo = computed(() => store.state.users.wallet);
const fee = ref(0);
onMounted(() => {
  store.dispatch("users/getRechargeInfo").then((res: any) => {
    if (res.code === 0) {
      fee.value = res.data.serviceCharge;
    }
  });
});
const submitForm = reactive({
  toUserId: "",
  amount: "",
  password:""
});
const chooseAll = () => {
  submitForm.amount = walletInfo.value.fuel.balance;
};
const handleNum = ()=>{
  if(Number.isNaN(+submitForm.amount)){
    submitForm.amount = '0'
  }else{
    submitForm.amount = parseFloat((+submitForm.amount).toFixed(6)) + ''
  }
}
const handleSubmit = () => {
  if (!submitForm.toUserId ) {
    Toast("用户id不正确");
    return;
  }

  if (
    !submitForm.amount ||
    submitForm.amount > walletInfo.value.fuel.balance
  ) {
    Toast("转账金额不正确");
    return;
  }
  if(!submitForm.password){
    Toast("请输入资金密码");
    return;
  }
  http
    .post("user/transfer_detailed/transaction", {
      // currency: "USDT", //币种
      quantity: submitForm.amount, //划转数量
      toUserId: submitForm.toUserId,
      password:submitForm.password
    })
    .then((res: any) => {
      if (res.code === 0) {
        Toast("转账成功");
        setTimeout(() => {
          goBack();
        }, 1000);
      }
    });
};
const goBack = () => {
  router.go(-1);
};
</script>
  
  <style lang="scss" scoped>
.cheader2 {
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}
.ibox1 {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 140px;
  img {
    width: 60px;
    margin-bottom: 14px;
  }
  div {
    font-size: 13px;
    color: #f5f5f5;
    text-align: center;
  }
}
.ibox2 {
  margin: 10px 20px;
  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    .ili-1 {
      font-size: 12px;
      color: #000;
      margin-bottom: 10px;
    }
    .ili-2 {
      background-color: #f1f1f1;
      border-radius: 4px;
      height: 38px;
      position: relative;
      .xxx {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #878b97;
        font-size: 13px;
        z-index: 1001;
        span {
          margin-left: 6px;
          color: #36b4ea;
        }
      }
    }
  }
}
.btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #36b4ea;
  border-radius: 3px;
  width: calc(100% - 40px);
  margin:40px auto;
}
.ali {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  .ali1 {
    font-size: 12px;
    color: #878b97;
  }
  .ali2 {
    color: #000;
    font-size: 12px;
  }
}
</style>